<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">导航-1</a></li>
            <li><a href="#">导航-2</a></li>
            <li><a href="#">导航-3</a></li>
            <li><a href="#">导航-4</a></li>
            <li><a href="#">导航-5</a></li>
            <li><a href="#">导航-6</a></li>
        </ul>
    </nav>
    <div id="d1">
        <p>
            <h1>message</h1>
            <ol>
                <li><a href="#">div-1</a></li>
                <li><a href="#">div-2</a></li>
                <li><a href="#">div-3</a></li>
                <li><a href="#">div-4</a></li>
                <li><a href="#">div-5</a></li>
            </ol>
        </p>
    </div>
    <!-- 通常建议进入js，作为body的最后一个子元素 -->
    <script>
        console.log(document);//document是浏览器中的一个内置对象
        //通过元素的id值获得元素
        let div=document.getElementById('d1');
        console.log(div);
        //获得页面中所有的li
        let lis= document.getElementsByTagName("li");
        console.log(lis);
        //*通配所有的节点
        let all= document.getElementsByTagName("*");
        console.log(all);
        console.log("----------------");
        console.log(document.all);
        //document.getElementsByTagName返回的是个HTML对象构成的数组
        console.log(all[0]); 
        console.log(all.length);
        console.log(all.item(0));
        //获得页面中第一个ul中所有的li
        let uls=document.getElementsByTagName("ul");
        let ul=uls[0];//获得页面中的第一个ul
        let ulLis= ul.getElementsByTagName("li");
        console.log(ulLis);
        //获得body元素
        console.log(document.getElementsByTagName("body")[0]);
        console.log(document.body);
     </script>
</body>
</html>